<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/myProfiles.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script>
        $(function () {
            //获取当前登录的用户
            var user = JSON.parse(sessionStorage.getItem("user"));
            $(".row").renderValues(user);
            $("#infoForm input[name='_method']").val('PUT');
            //users/balance
            //设置action属性
            $('#infoForm').attr("action", "/users/balance");
            //提交表单执行更新操作
            $("#submitBnt").click(function () {
                $("#infoForm").ajaxSubmit(function (data) {
                    console.log(data);
                    sessionStorage.setItem("user", JSON.stringify(data.result));
                    if (data.success) {
                        $(document).dialog({
                            type: 'confirm',
                            style: 'IOS',
                            titleShow: false,
                            content: '充值成功!',
                            buttons: [
                                {
                                    name: '返回到我的余额',
                                    callback: function () {
                                        //跳转
                                        window.location.href = "/mine/pursebalance.html";
                                    }
                                },
                                {
                                    name: '继续充值',
                                    callback: function () {
                                        //跳转
                                        window.location.href = "/mine/recharge.html";
                                    }
                                }
                            ]
                        });
                    } else {
                        $(document).dialog({
                            titleShow: false,
                            content: '充值失败'
                        });
                    }
                })
            })

        })
    </script>
    <title>支付</title>
</head>
<header class="header-box fixed" id="header">
    <a href="/mine/pursebalance.html">
            <span class="header-back">
                <i class="fa fa-angle-left fa-2x"></i>
            </span>
    </a>
</header>
<body>
<div class="container">
    <div class="row">
        <div class="container_logo">
            <div class="play col-xs-10 col-sm-10 col-md-10 col-lg-10">
                <img src="/css/images/logo.png"/>
            </div>
        </div>
    </div>
    <form id="infoForm" method="post">
        <input type="hidden" name="_method">
        <div class="row">
            <div class="play col-xs-10 col-sm-10 col-md-10 col-lg-10">
                <div class="form-group">
                    <input type="hidden" class="getId" name="id" render-value="id">
                    <h4>充值金额</h4>
                    <div class="number_amount">
                        <label>￥</label>
                        <input type="number" name="balance">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="quick_amount col-xs-10 col-sm-10 col-md-10 col-lg-10">
                <p class="col-xs-3 col-sm-3 col-md-3 col-lg-3" data-item='100'>100</p>
                <p class="col-xs-3 col-sm-3 col-md-3 col-lg-3" data-item='200'>200</p>
                <p class="col-xs-3 col-sm-3 col-md-3 col-lg-3" data-item='500'>500</p>
                <p class="col-xs-3 col-sm-3 col-md-3 col-lg-3" data-item='1000'>1000</p>
                <p class="col-xs-3 col-sm-3 col-md-3 col-lg-3" data-item='2000'>2000</p>
                <p class="col-xs-3 col-sm-3 col-md-3 col-lg-3" data-item='5000'>5000</p>
            </div>
        </div>
    </form>
    <div class="row">
        <div class="_submit col-xs-10 col-sm-10 col-md-10 col-lg-10">
            <a href="#" id="submitBnt">
                <span class="btn btn-primary submit-amount">充值</span>
            </a>
        </div>
        <!--<div class="_submit col-xs-10 col-sm-10 col-md-10 col-lg-10">
            <a href="#" class="submitBnt">
                <span class="btn btn-primary submit-amount">充值</span>
            </a>
        </div>-->
    </div>

</div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id='exampleModal'>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <p>输入金额不能超出5000元</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal" aria-label="Close">确定</button>
            </div>
        </div>
    </div>
</div>
<div class="mask"></div>
</body>
<script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
<script>
    var $amountInput = $('[type="number"]');
    var amount = '';
    var $getId = $('[type="hidden"]');
    var getparse = ParaMeter();
    $getId.val(getparse.id);
    $(".quick_amount p").off("click").on("click", function () {
        amount = $(this).text();
        if (!$(this).hasClass('active')) {
            $(this).addClass('active').siblings().removeClass('active');
            $amountInput.val(amount);
        } else {
            $(this).removeClass('active');
            $amountInput.val('');
        }
    })
    $amountInput.on('input propertychange', function () {
        if ($(this).val() > 5000) {
            $('#exampleModal').modal('show')
        }
        if ($(this).val() !== $('.quick_amount p.active').text()) {
            $('.quick_amount p').removeClass('active');
        }
    })
    $('#exampleModal').on('hidden.bs.modal', function (e) {
        $amountInput.val(5000);
    })

    function ParaMeter() {
        var obj = {};
        var arr = location.href.substring(location.href.lastIndexOf('?') + 1).split("&");
        for (var i = 0; i < arr.length; i++) {
            var aa = arr[i].split("=");
            obj[aa[0]] = aa[1];
        }
        return obj;
    }
</script>

</html>